#棒グラフ
バーの y 値に基づいてバーの色を選択するデモ。
function colorize(opaque) { return (ctx) => { const v = ctx.parsed.y; const c = v < -50 ? '#D60000' : v < 0 ? '#F46300' : v < 50 ? '#0358B6' : '#44DE28'; return opaque ? c : Utils.transparentize(c, 1 - Math.abs(v / 150)); }; } const config = { type: 'bar', data: data, options: { plugins: { legend: false, }, elements: { bar: { backgroundColor: colorize(false), borderColor: colorize(true), borderWidth: 2 } } } };
#ドキュメント
- バー
- データ構造 (
labels
) - オプション
- スクリプト可能なオプション